<template>

  <view class="vip_content">
    <view class="vip_top vip1_top_bg"
          :class="currentMenuIndex===0
          ?'vip1_top_bg':currentMenuIndex===1
          ?'vip2_top_bg':currentMenuIndex===2
          ?'vip3_top_bg':currentMenuIndex===3
          ?'vip4_top_bg':'vip5_top_bg'">
      <!-- #ifdef APP-PLUS || MP-->
      <view class="navbar navbar_v1"
            :style="{background: `rgba(255, 255, 255, ${scrollTop/88 > 0.92 ? 0.92 : scrollTop/88})`}">
        <u-status-bar></u-status-bar>
        <view class="back_content" @click="okBack">
          <view style="padding-left: 30rpx;"></view>
          <u-icon name="arrow-left"
                  :color="currentMenuIndex===0
                  ?'#774B12':currentMenuIndex===1
                  ?'#275A86':currentMenuIndex===2
                  ?'#765223':currentMenuIndex===3
                  ?'#A74BA7':scrollTop < 38
                  ? '#FFF385':'#e1a000'"
                  size="20">
          </u-icon>
          <text
              style="font-weight: 400;font-size: 36rpx;line-height: 44px;height:44px;position: absolute;width: 100%;text-align: center;"
              :class="currentMenuIndex===0
              ?'vip_text_color1':currentMenuIndex===1
              ?'vip_text_color2':currentMenuIndex===2
              ?'vip_text_color3':currentMenuIndex===3
              ?'vip_text_color4':scrollTop < 38
              ? 'vip_text_color5':'vip_text_color6'">
            会员中心
          </text>
        </view>
      </view>
      <view class="navbar1">
        <u-status-bar></u-status-bar>
        <view class="back_content"></view>
      </view>
      <!-- #endif -->
      <!-- no_vip_top_no -->
      <view style="text-align: center;height: 132rpx;overflow: hidden;margin-top: 40rpx" v-if="!isVip">
        <image style="height: 144rpx;width: 670rpx" :src="BaseImgUrl + '/vip/vip_no_top.png'"></image>
      </view>
      <!-- vip_top_v1 -->
      <view class="nav_meu_wrap"  v-if="isVip" style="height:380rpx">
        <swiper @change="swiperChange" previous-margin="50rpx" next-margin="30rpx"
                :current="currentMenuIndex" v-if="isVip" style="height: 100%">
          <swiper-item v-for="(item, index) in vipList" :key="index" j>
            <image :src="item.icon" style="width: 690rpx;height:390rpx;position: absolute;left: -20rpx"></image>
            <view class="vip_bg" :style="{height: '380rpx',position: 'relative',}">

              <view
                  :style="{position: 'absolute',bottom: '50rpx',marginLeft: '30rpx',width: '630rpx'}">
                <view class="current_lv"
                      :class="index===0?'vip_text_color1':index===1?'vip_text_color2':index===2?'vip_text_color3':index===3?'vip_text_color4':'vip_text_color5'">

                  {{
                    vipInfo?.info?.level === index + 1 ? '当前等级' : vipInfo?.info?.level < index + 1 ? '未解锁' : '已解锁'
                  }}
                </view>
                <view class="end_date"
                      :class="index===0?'vip_text_color1':index===1?'vip_text_color2':index===2?'vip_text_color3':index===3?'vip_text_color4':'vip_text_color5'">
                  会员有效期至{{ vipInfo?.info?.member_expiry_time }}
                </view>
                <view class="task_rate"
                      :class="index===0?'vip_text_color1':index===1?'vip_text_color2':index===2?'vip_text_color3':index===3?'vip_text_color4':'vip_text_color5'"
                      v-if="currentVipTask?.level !== 5">
                  <text style="font-weight: bold">升级V{{ currentVipTask?.level + 1 }}还需要</text>
                  {{ currentVipTask?.order_task - currentVipTask?.nums }} 笔订单
                </view>
                <view class="task_rate"
                      :class="index===0?'vip_text_color1':index===1?'vip_text_color2':index===2?'vip_text_color3':index===3?'vip_text_color4':'vip_text_color5'"
                      v-else>
                  <text style="font-weight: bold">
                    {{ vipInfo?.info?.level === 5 ? '当前等级V5' : '完成V1-V4任务升级到V5' }}
                  </text>
                </view>
                <view class="" :style="{width:'590rpx',height:'12rpx'}" style="border-radius: 10rpx;overflow: hidden;">
                  <progress :percent="
                  vipInfo?.info?.level === index+1 ? (currentVipTask?.nums / currentVipTask?.order_task) * 100:
                  vipInfo?.info?.level < index + 1 ? 0 : 100"
                            border-radius="100"
                            duration="6"
                            stroke-width="8"
                            :activeColor="index===0?'#CA8021':index===1?'#5984b4':index===2?'#b88036':index===3?'#ca5bca':'#F8C91A'"
                            backgroundColor="#FFF5FE"
                            active="true" v-if="currentVipTask?.level !== 5"/>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="tq_title" :class="currentMenuIndex===0
              ?'vip_text_color1':currentMenuIndex===1
              ?'vip_text_color2':currentMenuIndex===2
              ?'vip_text_color3':currentMenuIndex===3
              ?'vip_text_color4':scrollTop < 38
              ? 'vip_text_color5':'vip_text_color6'" v-if="memberInfo?.is_member === 1">
        <text>V{{ currentVipTask?.level }}可享{{ currentVipTask?.level_power?.length }}项特权</text>
        <view style="flex: 1"></view>
        <text style="font-weight: normal;font-size: 24rpx">{{ pzzxqjs ? '' : '品质专享券特权待解锁' }}</text>
      </view>
      <scroll-view scroll-x="true" style="padding-top: 0" v-if="isVip">
        <view style="display: flex;margin: 0 10rpx 0 0;">
          <up-col :span="item.icon === 'none'?0.1:2.2" justify="center" text-align="center"
                  customStyle="margin-left: 30rpx;margin-bottom: 30rpx"
                  v-for="(item, index) in currentVipList" :key="index">
            <view :data-url="item" v-if="item.picture">
              <view style="position: relative">
                <image :src="item.picture" style="width: 80rpx;height: 80rpx;margin: auto"
                       v-if="currentVipTask?.level_power.includes(item.id + '')"></image>
                <image :src="item.picture" style="width: 80rpx;height: 80rpx;margin: auto;filter: grayscale(100%);"
                       v-else></image>
                <view style="position: absolute;right: 20rpx;bottom: 0;font-size: 16rpx;color: #808080"
                      v-if="!currentVipTask?.level_power.includes(item.id + '')">未解锁
                </view>
              </view>
              <view style="margin-top: 18rpx;font-size: 22rpx;font-weight: bold"
                    :class="!currentVipTask?.level_power.includes(item.id + '')?'vip_text_color7':currentMenuIndex===0
                    ?'vip_text_color1':currentMenuIndex===1
                    ?'vip_text_color2':currentMenuIndex===2
                    ?'vip_text_color3':currentMenuIndex===3
                    ?'vip_text_color4':'vip_text_color5'">
                {{ item.title }}
              </view>
              <view style="margin-top: 10rpx;font-size: 22rpx;"
                    :class="!currentVipTask?.level_power.includes(item.id + '')?'vip_text_color7':currentMenuIndex===0
                    ?'vip_text_color1':currentMenuIndex===1
                    ?'vip_text_color2':currentMenuIndex===2
                    ?'vip_text_color3':currentMenuIndex===3
                    ?'vip_text_color4':'vip_text_color5'">
                {{ item.description }}
              </view>
            </view>
          </up-col>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </view>
      </scroll-view>
      <!-- no_vip_content -->
      <view class="top_content" v-if="!isVip">
        <view class="content">
          <view>
            <text class="title">
              {{ currentVipList?.length }}大专属特权
            </text>
            <text class="sub_title">
              开通会员专享多项特权
            </text>
          </view>
          <view style="flex: 1"></view>
          <view style="display: flex;flex-wrap: wrap;margin: 38rpx 10rpx 0">
            <up-col span="3" justify="center" text-align="center" customStyle="margin-bottom: 30rpx"
                    v-for="(item, index) in currentVipList" :key="index">
              <view :data-url="item">
                <image :src="item.picture" style="width: 80rpx;height: 80rpx;margin: auto"></image>
                <view style="margin-top: 20rpx;font-size: 22rpx;color:#000000;font-weight: bold">{{ item.title }}</view>
                <view style="margin-top: 8rpx;font-size: 22rpx;color:#888888;">{{ item.description }}</view>
              </view>
            </up-col>
          </view>
        </view>
      </view>
      <!-- v1_vip_content -->
      <view class="top_content" v-if="isVip">
        <view class="content">
          <view style="display: flex;justify-content: center;align-items: center" @click="showLevelTip = true">
            <text class="title">
              等级任务
            </text>
            <image class="yiwen" :src="BaseImgUrl + '/guanfan/home/yiwen.png'"/>
            <view style="flex: 1"></view>
            <text class="sub_title" style="margin-right: 30rpx" v-if="currentVipTask?.level !== 5">
              晋升至v{{ currentVipTask?.level + 1 }}需完成以下任务
            </text>
            <text class="sub_title" style="margin-right: 30rpx" v-else>

            </text>
          </view>
          <view style="flex: 1"></view>
          <view style="display: flex;align-items: center;margin: 40rpx 30rpx 10rpx">
            <image :src="BaseImgUrl + '/vip/task_icon.png'" style="width: 100rpx;height: 100rpx;margin: auto"></image>
            <view style="flex: 1;margin: 0 20rpx">
              <view v-if="currentVipTask?.level !== 5"
                    style="font-size: 28rpx;color: #333333;line-height: 28rpx;font-weight: bold">{{
                  currentVipTask?.title
                }}（{{ currentVipTask?.nums }}/{{ currentVipTask?.order_task }}）
              </view>
              <view v-else style="font-size: 28rpx;color: #333333;line-height: 28rpx;font-weight: bold">
                V5等级为满级，无需任务
              </view>
              <view style="font-size: 24rpx;color: #888888;line-height: 36rpx;margin-top: 15rpx">
                {{ currentVipTask?.message }}
              </view>
            </view>
            <view class="go_order" @click="toIndex">
              去下单
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- vip_content -->
    <view class="vip_contents">
      <view style="display: flex;margin-right: 30rpx">
        <text class="title">
          超值会员充值
        </text>
        <text class="sub_title">
          开通会员专享多项特权
        </text>
      </view>
      <scroll-view :scroll-x="true" style="padding-top: 30rpx">
        <view style="display: flex;margin: 0 10rpx 0 0;">
          <up-col :span="item.money === '0'?0.1:3.2" justify="center" text-align="center"
                  customStyle="margin-bottom: 30rpx;margin-left: 30rpx"
                  v-for="(item, index) in memberInfo?.member_type" :key="index" @click="handleMemberType(item)">
            <view style="display: flex;align-items: center;justify-content: center">
              <view :data-url="item" class="item_content" v-if="item.money !== '0'">
                <view style="margin-top: 20rpx;font-size: 28rpx;color:#000000;font-weight: bold">{{ item.name }}</view>
                <view style="margin-top: 16rpx;font-size: 28rpx;color:#FC754A;font-weight: bold">
                  <text class="">￥</text>
                  {{ item.price }}
                </view>
                <view style="margin-top: 16rpx;font-size: 24rpx;color:#B5B5B5;">原价
                  <text style="text-decoration: line-through">￥{{ item.line_price }}</text>
                </view>
                <view class="ljkt">
                  立即{{ memberInfo?.is_member === 1 ? '续费' : '开通' }}
                </view>
              </view>
              <view v-else>
              </view>
            </view>
          </up-col>
        </view>
      </scroll-view>
    </view>
    <!-- vip_gift -->
    <view class="vip_gif_contents">
      <view style="display: flex;margin-right: 30rpx;align-items: center">
        <text class="title">
          {{ memberInfo?.is_member === 1 ? '会员专属礼包' : (currentVipAward?.length || 5) + '大会员专属礼包' }}
        </text>
        <view style="flex: 1"></view>
        <text class="sub_title" v-if="vipInfo?.status === 1">
          <text style="color: #3D3D3D">每月初</text>
          领取会员大礼包
        </text>
        <view
            style="background: linear-gradient(90deg, #FC754A 0%, #FE9E54 100%);border-radius: 60rpx;padding: 10rpx 20rpx;color: white;font-size: 26rpx"
            v-if="vipInfo?.status === 2" @click="getGif">
          领取奖励
        </view>
        <view
            style="background: linear-gradient(270deg, #dee9ea 0%, #d9d9e6 100%);;border-radius: 60rpx;padding: 10rpx 20rpx;color: black;font-size: 26rpx"
            v-if="vipInfo?.status === 3">
          等待订单结算中
        </view>
      </view>
      <view style="height: 30rpx"></view>
      <view style="display: flex;flex-wrap: wrap;margin: 0 10rpx">
        <up-col span="6" justify="center" text-align="center" customStyle="margin-bottom: 30rpx"
                v-for="(item, index) in currentVipAward" :key="index">
          <view :data-url="item" class="item_content" style="position: relative">
            <view style="display: flex;flex-direction: column;align-items: start">
              <view style="margin-top: 20rpx;font-size: 24rpx;color:#000000;font-weight: bold">{{ item.title }}</view>
              <view style="margin-top: 16rpx;font-size: 22rpx;color:#888888;">{{ item.description }}</view>
            </view>
            <view style="flex: 1"></view>
            <view style="width: 10rpx"></view>
            <image :src="item.logo"
                   :class="'image_gif2'" mode="aspectFit"></image>
            <view style="width: 10rpx"></view>
            <view class="vip_can" v-if="isVip">
              {{ item.nums !== 0 ? item.nums + ' 张' : 'V' + item.level + '可领' }}
            </view>
          </view>
        </up-col>
      </view>
    </view>
    <view class="vip_rule">
      <view class="vip_rule2" @click="vipGZ">
        <view>
          会
        </view>
        <view>
          员
        </view>
        <view>
          规
        </view>
        <view>
          则
        </view>
      </view>
      <view style="margin-top: 20rpx"></view>
      <view class="vip_rule1" @click="goVipList">
        <view>
          充
        </view>
        <view>
          值
        </view>
        <view>
          记
        </view>
        <view>
          录
        </view>
      </view>
    </view>
    <view style="height: 268rpx"></view>
    <up-safe-bottom></up-safe-bottom>
    <!-- vip_bottom -->
    <view class="bottom">
      <view style="display: flex;align-items: center;">
        <view class="join_qu" @click="toFuli">
          免费领会员
        </view>
      </view>
      <up-safe-bottom></up-safe-bottom>
    </view>
  </view>
  <up-popup :show="showLevelTip" mode="center" :round="10" @close="showLevelTip = false" closeable
            :safe-area-inset-bottom="false">
    <view class="box-content">
      <view class="title">等级任务说明</view>
      <view style="height: 1px;width:100%;background-color: #f4f0f0"></view>
      <view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center">
        <view class="content">
          <view>
            <text>1.等级任务统计的是等级更新之后新增的用户有效订单，各等级</text>
            <text style="color: #FC754A;font-weight: bold">任务数量不累加</text>
          </view>
          <view style="margin-top: 16rpx">
            <text>2.等级任务当月数据次</text>
            <text style="color: #FC754A;font-weight: bold">月将清零</text>
          </view>
          <view>
            <text>3.</text>
            <text style="margin-top: 16rpx;font-weight: bold">完成等级任务自动升至下一等级并更新等级任务</text>
          </view>
          <!--          <u-parse :content="redRule"></u-parse>-->
        </view>
      </view>
      <view style="height: 1px;background-color: #f4f0f0;margin: 0 30rpx"></view>
      <view style="display: flex;margin: 30rpx">
        <view class="know" @click="showLevelTip = false">我已知晓</view>
      </view>
    </view>
  </up-popup>
  <u-popup :show="showPay" mode="bottom" :round="10" closeable @close="showPay = false">
    <view class="pay_type">选择支付方式</view>
    <view class="popup_content">
      <!-- 后台控制支付方式 -->
      <view class="pay-way">
        <view class="radio-list">
          <view style="display: flex;flex-direction: column;">
            <view class="radio-one">
              <view class="radio-left" @tap="NewradioChange" :data-type="item.type"
                    v-for="(item, index) in payTypeList" :key="index">
                <image v-if="item.name === '余额支付'" :src="BaseImgUrl + '/images/ye_icon.png'"></image>
                <image v-if="item.name === '微信支付'" :src="BaseImgUrl + '/images/wx_icon.png'"></image>
                <image v-if="item.name === '支付宝支付'" :src="BaseImgUrl + '/images/zfb_icon.png'"></image>
                <view class="radio-int">{{ item.name }}</view>
                <view class="dianji">
                  <image v-if="NewPayType === item.type" class="check_icon"
                         :src="BaseImgUrl + '/images/select_fill.png'"></image>
                  <image v-else class="check_icon" :src="BaseImgUrl + '/images/select_icon.png'"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="protocol">
        <view style="margin-left: 8rpx" @tap="check_icon()">
          <image v-if="check_on === 0" class="check_icon"
                 :src="BaseImgUrl + '/images/icon_check_gray.png'"></image>
          <image v-else class="check_icon" :src="BaseImgUrl + '/images/icon_check_on.png'"></image>
        </view>
        <view class="fuwuxieyi" @click="toXieYi()">
          请仔细阅读《
          <text style="color: #1db9ff">会员协议</text>
          》
        </view>
      </view>
      <button class="submit" @tap="buyMember">
        立即支付
      </button>
    </view>
  </u-popup>
</template>

<script setup>

import {BaseImgUrl} from "../../utils/lshttp";
import {ref} from "vue";
import {onLoad, onPageScroll} from "@dcloudio/uni-app";
import {buyMemberAPI, getAwardAPI, getMemberAPI, getUserInfoAPI, vipInfoAPI} from "../../services/me";
import {usePayHook} from "../../hooks/usePay";
import {useUserInfoStore} from "../../stores/modules/userInfo";

const isVip = ref(true);
const showLevelTip = ref(false)

const okBack = () => {
  uni.navigateBack()
}
const scrollTop = ref(0)
onPageScroll(e => {
  scrollTop.value = e.scrollTop
})

const vipList = ref([
  {"icon": BaseImgUrl + '/vip/vip_bg1.png', "name": "超值返利", "subName": "每单多省3元"},
  {"icon": BaseImgUrl + '/vip/vip_bg2.png', "name": "极速审核", "subName": "返利秒到账"},
  {"icon": BaseImgUrl + '/vip/vip_bg3.png', "name": "推广特权", "subName": "邀请获得奖励"},
  {"icon": BaseImgUrl + '/vip/vip_bg4.png', "name": "专属客服", "subName": "客服优先处理"},
  {"icon": BaseImgUrl + '/vip/vip_bg5.png', "name": "会员日", "subName": "会员专属活动"},
])
const userInfoStore = useUserInfoStore()
const showPay = ref(false)
const NewPayType = ref('applet_wechat')
const user = ref()

// 免费领会员
const toFuli = () => {
  uni.switchTab({
    url: '/pages/fuli/fuli'
  })
}
// 会员协议
const toXieYi = () => {
  uni.navigateTo({
    url: '/pages/me/xieyimember'
  })
}
// 点击VIP规则
const vipGZ = () => {
  uni.navigateTo({url: "/challenge/challengeRule?type=5"})
}

const goVipList = () => {
  uni.navigateTo({url: "/pagesme/vip_order"})
}

const getGif = async () => {
  const res = await getAwardAPI()
  const vipRes = await vipInfoAPI()
  vipInfo.value = vipRes.result
  await uni.showToast({title: res.msg, icon: "none"})
}
// 购买会员
const buyMember = async () => {
  if(check_on.value === 0){
    await uni.showToast({title:"请勾选并仔细阅读会员协议", icon: "none"})
    return
  }
  const res = await buyMemberAPI(NewPayType.value, vipID.value)
  if (NewPayType.value === "balance") {
    await getUSerInfo()
    return
  }
  const payInfo = res.result
  uni.hideLoading()
  console.log('payInfo--->', payInfo)
  if (NewPayType.value === "app_alipay") {
    await usePayHook().aliPay(payInfo.pay_string, '购买会员', () => {
      getUSerInfo()
    })
    return
  }
  await usePayHook().wxPay(payInfo, '购买会员', () => {
    getUSerInfo()
  })
}
onLoad(async () => {
  // #ifdef APP-PLUS
  NewPayType.value = 'app_wechat'
  // #endif
  // #ifdef H5
  NewPayType.value = 'wechat'
  // #endif
  user.value = userInfoStore.userInfo
  isVip.value = user.value.is_member === 1
  // isVip.value = false
  const res = await getMemberAPI()
  memberInfo.value = res.result
  const vipRes = await vipInfoAPI()
  vipInfo.value = vipRes.result
  currentMenuIndex.value = memberInfo.value?.is_member === 1 ? vipInfo.value.info.level - 1 : 0
  setCurrentTask()
})

const currentMenuIndex = ref(0)
const currentVipList = ref()
const currentVipTask = ref()
const currentVipAward = ref()
const pzzxqjs = ref(false)
const swiperChange = (e) => {
  currentMenuIndex.value = e.detail.current;
  setCurrentTask()
}

const setCurrentTask = () => {
  currentVipList.value = vipInfo.value.power[isVip.value ? currentMenuIndex.value + 1 : currentMenuIndex.value]
  currentVipTask.value = vipInfo.value.level_task[currentMenuIndex.value]
  vipInfo.value.award_task.forEach((item) => {
    if (item[0].level) {
      item.sort((a, b) => a.level - b.level);
      console.log("item", item)
    }

  })
  currentVipAward.value = vipInfo.value.award_task[isVip.value ? currentMenuIndex.value + 1 : currentMenuIndex.value]
  console.log("currentVipAward", currentVipAward.value)
  pzzxqjs.value = false
  currentVipAward.value.forEach((item) => {
    if (item.id === 7 && item.nums > 0) {
      console.log(item)
      pzzxqjs.value = true
    }
  })
}

const memberInfo = ref()
const vipInfo = ref()
// 刷新用户信息
const getUSerInfo = async () => {
  showPay.value = false
  const vipRes = vipInfoAPI()
  vipInfo.value = vipRes.result
  const res = await getMemberAPI()
  memberInfo.value = res.result
  isVip.value = memberInfo.value.is_member === 1
  // 刷新用户信息，刷新会员信息
  const userRes= await getUserInfoAPI()
  userInfoStore.setUserInfo(userRes.result)
  await uni.showToast({
    title: '购买会员成功',
    icon: 'none',
    mask: true,
  })

}
const vipID = ref()
// 点击切换会员类型
const handleMemberType = (item) => {
  showPay.value = true
  vipID.value = item.id
}
// 支付方式选择
const NewradioChange = (evt) => {
  NewPayType.value = evt.currentTarget.dataset.type
}
const toIndex = () => {
  uni.switchTab({url: '/pages/index/index'})
}
const payTypeList = ref([
  {
    name: '微信支付',
    // #ifdef H5
    type: 'wechat',
    // #endif
    // #ifdef APP-PLUS
    type: 'app_wechat',
    // #endif
    // #ifdef MP-WEIXIN
    type: 'applet_wechat'
    // #endif
  },
  // #ifdef APP-PLUS
  {
    name: '支付宝支付',
    // #ifdef APP-PLUS
    type: 'app_alipay',
    // #endif
  },
  // #endif
  {
    name: '余额支付',
    type: 'balance'
  }
])

const check_on = ref(0)
const check_icon = () => {
  if (check_on.value === 1) {
    check_on.value = 0
  } else {
    check_on.value = 1
  }
}
</script>

<style lang="scss">
page {
  background: #F6F6F6;
}
</style>

<style scoped lang="scss">

.vip_top {
  //width: 100%;
  color: #ff9c1f;
  // #ifdef H5
  padding-top: 20rpx;
  // #endif
  transition: all 3s;

  .top_content {
    background: #F6F6F6;
    border-radius: 40rpx 40rpx 0 0;
    padding: 30rpx 0 0;

    .content {
      margin: auto;
      width: 690rpx;
      display: flex;
      flex-direction: column;
      padding: 30rpx 0 10rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
  }
}

.title {
  font-weight: 600;
  font-size: 32rpx;
  color: #3D3D3D;
  line-height: 24rpx;
  margin-left: 30rpx;
}

.sub_title {
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  line-height: 24rpx;
  margin-left: 20rpx;
}

.vip_contents {
  margin: 30rpx;
  height: 368rpx;
  padding-top: 30rpx;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .item_content {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 190rpx;
    height: 220rpx;
    margin: 10rpx 0 0 0;
    background: #FFFFFF;
    box-shadow: 0 6rpx 13rpx 6rpx rgba(0, 0, 0, 0.1);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    position: relative;

    .ljkt {
      width: 140rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      color: white;
      font-size: 24rpx;
      box-shadow: 0 3rpx 18rpx 6rpx rgba(252, 117, 74, 0.28);
      background: linear-gradient(90deg, #FC754A 0%, #FE9E54 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      position: absolute;
      bottom: -24rpx;
    }
  }
}

.vip_gif_contents {
  margin: 30rpx;
  //height: 440rpx;
  padding-top: 30rpx;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .item_content {
    display: flex;
    align-items: center;
    margin: auto;
    width: 300rpx;
    height: 140rpx;
    padding: 10rpx 0 10rpx 10rpx;
    background: #FFF7F4;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .image_gif1 {
      width: 96rpx;
      height: 88rpx;
      margin: auto
    }

    .image_gif2 {
      width: 72rpx;
      height: 90rpx;
      margin: auto
    }

    .image_gif3 {
      width: 80rpx;
      height: 104rpx;
      margin: auto
    }

    .image_gif4 {
      width: 96rpx;
      height: 96rpx;
      margin: auto
    }
  }
}
.protocol {
  color: #999;
  display: flex;
  font-size: 24rpx;
  align-items: center;
  border-top: #EAEAEA solid 1rpx;
  margin: 0 30rpx;
}

.check_icon {
  width: 38rpx;
  height: 38rpx;
  position: relative;
  top: 0;
}
.bottom {
  padding: 10rpx 20rpx calc(env(safe-area-inset-bottom) + 10rpx);
  position: fixed;
  width:710rpx;
  bottom: 0;
  z-index: 199;
  background-color: white;

  .join_qu {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(64deg, #FC754A 0%, #FEBC5B 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    color: white;
    font-size: 36rpx;
    text-align: center;
    line-height: 90rpx
  }
}

.nav_meu_wrap {
  padding: 0 0 6rpx 0;
}

.end_date {
  font-weight: 400;
  font-size: 24rpx;
  color: #774B12;
  line-height: 34rpx;
  position: relative;
}

.current_lv {
  font-weight: 400;
  font-size: 24rpx;
  color: #774B12;
  line-height: 24rpx;
  position: relative;
  margin-bottom: 118rpx;
  margin-left: -10rpx;
}

.task_rate {
  font-weight: 400;
  font-size: 26rpx;
  color: #774B12;
  line-height: 24rpx;
  position: relative;
  margin-top: 60rpx;
  margin-bottom: 20rpx;
}

.yiwen {
  width: 32rpx;
  height: 32rpx;
  margin-left: 10rpx;
}

.go_order {
  font-weight: 400;
  font-size: 26rpx;
  color: #FFFFFF;
  text-align: center;
  line-height: 56rpx;
  width: 130rpx;
  height: 56rpx;
  background: linear-gradient(270deg, #FC754A 0%, #FE9E54 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
}

.vip_rule {
  position: fixed;
  z-index: 999;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 26%;
  // #ifdef MP || APP-PLUS
  top: 47%;
  // #endif
  text-align: center;
}

.vip_rule2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 46rpx;
  height: 152rpx;
  text-align: center;
  background-color: rgb(252, 247, 209);
  font-size: 24rpx;
  color: #AC6E1D;
  border-radius: 10rpx 0 0 10rpx;
}

.vip_rule1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 46rpx;
  height: 152rpx;
  text-align: center;
  background-color: rgb(252, 231, 209);
  font-size: 24rpx;
  color: #AC6E1D;
  border-radius: 10rpx 0 0 10rpx;
}
.back_content {
  display: flex;
  align-items: center;
  height: 44px;
}

.navbar {
  position: fixed;
  z-index: 1000;
  width: 100%;
}

.navbar1 {
  z-index: 1000;
  width: 100%;
}

.vip_text_color1 {
  color: #774B12;
}

.vip_text_color2 {
  color: #275A86;
}

.vip_text_color3 {
  color: #765223;
}

.vip_text_color4 {
  color: #A74BA7;
}

.vip_text_color5 {
  color: #FFF385;
}

.vip_text_color7 {
  color: #868686;
}

.vip_text_color6 {
  color: #e1a000;
}

.navbar_no {
  background: linear-gradient(179deg, #FDF8B8 2%, #FFE665 88%, #FFE665 100%);
}

.navbar_v1 {
  background: linear-gradient(179deg, #FBF6B6 2%, #FCF5AF 68%, #FCF3AA 100%);
}

.navbar_v2 {
  background: linear-gradient(179deg, #D6EEFF 2%, #cfe9fc 100%);
}

.navbar_v3 {
  background: linear-gradient(179deg, #FEF1C4 2%, #fbecba 100%);
}

.navbar_v4 {
  background: linear-gradient(179deg, #EFD4F5 2%, #edcbf2 100%);
}

.navbar_v5 {
  background: linear-gradient(179deg, #413E39 2%, #36332f 100%);
}

.vipNo_top_bg {
  background: linear-gradient(179deg, #FDF8B8 2%, #FFE665 88%, #FFE665 100%);
}

.vip1_top_bg {
  background: linear-gradient(179deg, #FDF8B8 2%, #FFE665 88%, #FFE665 100%);
}

.vip2_top_bg {
  background: linear-gradient(179deg, #D6EEFF 2%, #BBDDF9 88%, #BBDDF9 100%);
}

.vip3_top_bg {
  background: linear-gradient(179deg, #FEF1C4 2%, #FADE95 88%, #FADE95 100%);
}

.vip4_top_bg {
  background: linear-gradient(179deg, #EFD4F5 2%, #ECADEF 88%, #ECADEF 100%);
}

.vip5_top_bg {
  background: linear-gradient(179deg, #413E39 2%, #090806 88%, #090806 100%);
}

.box-content {
  display: flex;
  flex-direction: column;
  width: 600rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  letter-spacing: 3rpx;

  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    line-height: 32rpx;
    text-align: center;
    padding: 28rpx 0;
  }

  .warning {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;

    image {
      width: 76rpx;
      height: 76rpx;
    }

    text {
      font-weight: bold;
      font-size: 36rpx;
      color: #FF5621;
      line-height: 36rpx;
    }
  }

  .content {
    margin: 30rpx 20rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    line-height: 56rpx;
  }

  .know {
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
    width: 560rpx;
    height: 80rpx;
    background: #FDB058;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
  }
}

.vip_can {
  position: absolute;
  width: 100rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  background: #FFE9D8;
  border-radius: 16rpx 0 16rpx;
  top: 0;
  left: 0;
  font-size: 24rpx;
  color: #FC754A;
}

/* 会员中心 */
.pay_type {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-top: 20rpx;
  border-radius: 20rpx;
}

.popup_content {
  box-sizing: border-box;
  padding-bottom: 50rpx;
  border-radius: 20rpx;

  .pay-way {
    margin-top: 20rpx;
    padding: 10rpx 30rpx;
    background-color: #FFFFFF;
    border-radius: 40rpx;
  }

  .title {
    font-size: 30rpx;
    font-weight: bold;
  }

  .radio-list {
    background-color: #FFFFFF;
  }

  .radio-left {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 26rpx 0;
    border-top: #EAEAEA solid 1rpx;
  }

  .radio-left image {
    width: 58rpx;
    height: 58rpx;
    display: inline-block;
  }

  .radio-int {
    font-size: 26rpx;
    margin-left: 20rpx;
  }

  .check_icon {
    width: 34rpx;
    height: 34rpx;
    position: relative;
    top: 0;
    margin-right: 7rpx;
  }

  .dianji {
    margin-left: auto;

    image {
      width: 38rpx !important;
      height: 38rpx !important;
      opacity: .9;
    }
  }

  .popup_content {
    box-sizing: border-box;
    padding-bottom: 50rpx;
  }

  /* 立即开通 */
  .submit {
    font-weight: bold;
    width: 96%;
    height: 88rpx;
    background: linear-gradient(to right, rgba(254, 226, 198, 1), rgba(240, 186, 138, 1));
    border-radius: 60rpx;
    font-size: 36rpx;
    color: #64462a;
    line-height: 88rpx;
  }

  .submit text {
    font-size: 48rpx;
    color: #ff5339;
  }
}

.fuwuxieyi {
  color: #795548;
  padding: 30rpx 0 30rpx 0;
}

.tq_title {
  font-weight: bold;
  font-size: 26rpx;
  line-height: 36rpx;
  display: flex;
  margin: 10rpx 60rpx 30rpx;
}
</style>
